<template>


  <div class="box">
    <div class="top">
       <div class="center">
                          <!-- 标签 -->
                          <ModelTitle>
                          <template>
                            系统公告
                          </template>
                        </ModelTitle>
  
  
                          <!-- 时间搜索框 -->
                          <div class="zhanwei">

                            
                            
                           
                            <el-form ref="form" :model="form" :inline="true"   label-width="70px"  >
                                          <el-form-item  label="操作人" >
                                              <el-select v-model="value" placeholder="请选择">
                                                  <el-option
                                                  v-for="item in list"
                                                  :key="item.agencyId"
                                                  :value="item.agencyType">
                                                  </el-option>
                                              </el-select>
                                          </el-form-item>



                          <el-date-picker label-width="70px"
                                  v-model="value2"
                                  type="daterange"
                                  align="left"
                                  unlink-panels
                                  range-separator="-"
                                  start-placeholder="开始日期"
                                  end-placeholder="结束日期"
                                  :picker-options="pickerOptions">
                          </el-date-picker>




                                                      <!-- 搜索框 -->
                            <el-input style="width:120px;margin-left: 10px;"
                              placeholder="请输入内容"
                              v-model="input"
                              clearable suffix-icon="ddg">
                            </el-input>
                            
                             <!-- 搜索按钮 -->
                            <el-button type="primary"  style="margin-left: 105px;"  @click="onSubmit" icon="el-icon-search">搜索</el-button>


                            <!-- 新增按钮 -->
 
                              <el-button type="primary"   @click="dialogFormVisible = true">新增系统公告</el-button>
                            </el-form>





  

 
  

                  <!-- 表格 -->
                  <div>
                  <el-table 
                  :data="list.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
                  border:none
                  stripe
                  style="width:1110px;">


                    <el-table-column
                      type="selection"  
                      width="50"
                      prop="id">
                    </el-table-column>

                    <el-table-column
                      prop="title"
                      label="消息标题"
                      width="130"
                      
                      
                      align="center">
                    </el-table-column>

                    <el-table-column
                      prop="text"
                      label="消息内容"
                      width="450"
                      align="center">
                    </el-table-column>

                    <el-table-column
                      prop="people"
                      label="发布人"
                      align="center">
                    </el-table-column>

                    <el-table-column
                    :formatter="serviceStatus"
                      prop="state"
                      label="发布状态"
                      align="center">
                    </el-table-column>



                    <el-table-column
                      prop="address"
                      label="操作详情"
                      width="180"
                      align="center">
                      <template slot-scope="scope">
                        <el-button
                          size="mini"
                          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                          <el-button
                          size="mini"
                          type="danger"
                          @click="handleClickeditdel(scope.row)">删除</el-button>
                      </template>
                    </el-table-column>
                    
                </el-table> 

                </div>



                    <!-- 分页 -->
                    <div style="width:530px;height:50px;margin-left: 300px;float: left;margin-top: 40px;">

                      <el-pagination
                          align="center"
                          @size-change="handleSizeChange"
                          @current-change="handleCurrentChange"
                          :current-page="currentPage"
                          :page-sizes="[5, 10, 15, 20]"
                          :page-size="pageSize"
                          layout="total, sizes, prev, pager, next, jumper"
                          :total="list.length"
                        >
                        </el-pagination>

                    </div>
                    
                    </div>
  
                    <!-- 新增弹框 -->
                    <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
                    <el-form :model="form">
                      <el-form-item label="活动名称" :label-width="formLabelWidth">
                        <el-input v-model="form.name" autocomplete="off"></el-input>
                      </el-form-item>
                      <el-form-item label="活动区域" :label-width="formLabelWidth">
                        <el-select v-model="form.region" placeholder="请选择活动区域">
                          <el-option label="区域一" value="shanghai"></el-option>
                          <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                      <el-button @click="dialogFormVisible = false">取 消</el-button>
                      <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
                    </div>
                  </el-dialog>


  

      </div>
    </div>
  </div>
  
  </template>
  
  <script>
  import axios from 'axios'
  axios.defaults.baseURL="http://localhost:8080"
  import ModelTitle from '@/components/ModelTitle.vue'


  export default {
    methods: {
      handleEdit(index, row) {
        console.log(index, row);
      },


      //删除
      handleClickeditdel(row) {
      axios({
                url: "/user/deleteLabe",
                method: "POST",
                params:{
                id:row.id
                }
            }).then((res) => {
                // this.list = res.data; //把值传到list里面
                // console.log(this.list);
                
                this.$message.success('删除成功')
                this.query();
            })
    },

      onSubmit(){
              axios({
                url:'/user/getListuser',
                method:'GET',
                params:{}
                    }).then((res) => {
                      this.list=res.data      //把值传到list里面
                      console.log(res.data);
                    })
      },
      
             //每页条数改变时触发 选择一页显示多少行
              handleSizeChange(val) {
                //   alert(`每页 ${val} 条`);
                this.currentPage = 1;
                this.pageSize = val;
              },
              //当前页改变时触发 跳转其他页
              handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.currentPage = val;
              },

              //咨询查询
            query(){
              axios({
                url:'/user/getListImg',
                method:'GET',
                    }).then((res) => {
                      this.list=res.data      //把值传到list里面
                      console.log(res.data);
                    })
                },


                serviceStatus(row, column, cellValue, index) {
                console.log(cellValue);
                if (cellValue === 1) {
                  return <font color="#FF0000">待发布</font>;
                } else if (cellValue === 2) {
                  return <font color="#00FF00">已发布</font>;
                } else if (cellValue === 3) {
                  return <font color="#0000FF">未发布</font>;
                }
              },

        },


      data() {
        return {
          dialogFormVisible: false,//新增表格弹框
          formLabelWidth: '120px',//新增表格弹框

          form: {//新增传值from表单
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },

        
          //数据库数据
          list:[],

          currentPage: 1, // 当前页码
          pageSize: 5, // 每页的数据条数

          input: '',
          pickerOptions: {
          },
          value1: '',
          value2: ''
        };
        
      },

      //查询
      created () {
            this.query()
        },

      components: { ModelTitle } //引入标题组件
    };
  
  
  </script>
  
  <style>
          *{
              margin: 0;
              padding: 0;
          }
          body{ 
              background: #F2F7FA;
          }
          .box{
              width: 1150px;
              height: 1112px;
              margin: 20px auto;
              background: rgb(192, 192, 192);
              position: relative;
          }
  
          .center{
              background-color: rgba(255, 255, 255, 1);
              width: 1150px;
              height: 1112px;
          }

          .zhanwei{
              width: 1150px;
              height: 40px;
  
              float: left;
              margin-top: 50px;
              
          }
  
  </style>
  